<template>
  <div style="padding: 50px;">
    <div style="text-align: center; width: 80%">
      <h2>用户登陆</h2>
    </div>
    <br />
    <a-form
      :form="form"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item label="登陆名称">
        <a-input
          size="large"
          allowClear
          placeholder="请输入登陆名称"
          v-decorator="[
            'username',
            {
              rules: [
                {
                  required: true,
                  message: '请输入登陆名称!',
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="登陆密码">
        <a-input-password
          size="large"
          allowClear
          placeholder="请输入登陆密码"
          v-decorator="[
            'password',
            {
              rules: [
                {
                  required: true,
                  message: '请输入登陆密码!',
                },
              ],
            },
          ]"
        />
      </a-form-item>
      <a-form-item label="验证码">
        <a-input
          size="large"
          allowClear
          placeholder="请输入验证码"
          v-decorator="[
            'validCode',
            {
              rules: [
                {
                  required: true,
                  message: '请输入验证码!',
                },
              ],
            },
          ]"
        >
          <template slot="addonAfter">
            <img
              :src="captchaData"
              style="cursor: pointer; height: 38px"
              @click="refresh"
            />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit" :disabled="submitting">
          {{ buttonText }}
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import Constant from "../utils/Constant";
export default {
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      formInline: {
        user: "",
        password: "",
      },
      submitting: false,
      buttonText: "立即登陆",
      captchaData: null,
    };
  },
  created() {
    this.getKaptcha();
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);
          this.submitting = true;
          //   this.buttonText = "Generating ... ";
          //   this.generateWallet(values.password);
          this.login(values);
        }
      });
    },
    login(formValues) {
      console.log("login");
      let params = {};
      params.loginId = formValues.username;
      params.loginPwd = formValues.password;
      params.validCode = formValues.validCode;
      console.log(params);
      let url = Constant.ACCOUNT_LOGIN_URL;

      this.$http.post(url, params).then(
        (resp) => {
          // console.log(resp);
          this.submitting = false;
          if (resp.data.code === "01") {
              console.log(resp.data.result)
              localStorage.setItem("authorization", resp.data.result.authorization);
              localStorage.setItem("userType", resp.data.result.userType);
              localStorage.setItem("address", resp.data.result.address);
              // this.$emit("logined", resp.data.result.authorization);
              // this.ebus.$emit("logined", resp.data.result.authorization);

              this.$router.push({
                name: "Dashborad"
              })

          } else {
            this.$message.error(resp.data.message);

          }
        },
        (err) => {
          console.log(err);
          this.submitting = false;
        }
      );
    },
    getKaptcha() {
      let url = Constant.LOGIN_CAPTCHA_URL + "?r=" + Math.random();
      this.$http.get(url).then(
        (resp) => {
          console.log(resp);
          this.captchaData = resp.data;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    refresh() {
      this.getKaptcha();
    },
  },
};
</script>
